/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20230930
* @version:0.1.5
* @type:interface
* @description:
* # SMenu
* SMenu is a menu bar located on the left side that you can quickly generate through the menu-data property
* ## properties
* - in property <brush> active-color: Specifies the color for active menu items, using the default from `DefaultSMenuProps.active-color`.
* - in property <length> tip-width: The width of the tip (if any) of the menu items, set by `DefaultSMenuProps.tip-width`.
* - in-out property <length> icon-box-size: Specifies the size of the icon container in menu items, using a default size from `DefaultSMenuProps.icon-box-size`.
* - in-out property <length> icon-size: Specifies the icon size within the icon box, using a default size from `DefaultSMenuProps.icon-size`.
* - in property <[MenuData]> menu-data: An array containing data for each menu item, set by `DefaultSMenuProps.menu-data`.
* - in-out property <[MenuData]> sub-menu-data: Data for any sub-menus that may be part of this menu component.
* - in-out property <string> active: Keeps track of which menu item is currently active, initialized to "0".
* - in property <length> more-height: Height of the "more" icon, set to the value of `icon-box-size`.
* - in property <length> more-width: Calculates the width required to display a "more" icon based on the number of items and the icon box size.
* ## Callbacks
* - callback change(int, MenuData): Triggered when a menu item is selected or activated, passing the index and the data of the selected menu item.
* ============================================
*/
import { SCard } from "../card/index.slint";
import { SIcon } from "../icon/index.slint";
import {ROOT-STYLES,DefaultSMenuProps} from "../../themes/index.slint";
import { STip } from "../tip/index.slint";
import { Themes,UseIcons,BorderType,MenuData } from "../../use/index.slint";
import { SPopup } from "../popup/index.slint";
import { GridBox } from "std-widgets.slint";


component MenuItem inherits Rectangle {
  in property <brush> hover-icon-color;
  in property <image> icon;
  in property <length> icon-size;
  in property <Themes> theme;
  in property <bool> active;
  in property <brush> active-color : ROOT-STYLES.radio-active;
  out property <bool> has-hover <=> area.has-hover;
  states [
    hover when area.has-hover:{icon.colorize : hover-icon-color;}
  ]
  callback clicked();
  
  area:=TouchArea {
    mouse-cursor: pointer;
    z: 116;
    clicked => {
      root.clicked();
    }
  }
  if active:SCard {
    x: 0;
    height: root.height;
    width: 2px;
    theme: root.theme;
    border-type: BorderType.None;
    border-radius: 0;
    background: root.active-color;
    drop-shadow-blur: 0;
    drop-shadow-color: root.active-color;
    drop-shadow-offset-x: 0;
    drop-shadow-offset-y: 0;
  }
  icon:=SIcon {
    colorize: active?root.active-color:self.get-colorize();
    theme: root.theme; 
    height:root.icon-size;
    width: root.icon-size;
    source: root.icon;
  }
}

export component Menu inherits SCard {
  height: 100%;
  width: DefaultSMenuProps.width;
  border-radius: 0;
  clip: false;
  theme: DefaultSMenuProps.theme;
  in property <brush> active-color : DefaultSMenuProps.active-color;
  in property <length> tip-width : DefaultSMenuProps.tip-width;
  in-out property <length> icon-box-size : DefaultSMenuProps.icon-box-size;
  in-out property <length> icon-size : DefaultSMenuProps.icon-size ;
  in property <[MenuData]> menu-data : DefaultSMenuProps.menu-data;
  in-out property <[MenuData]> sub-menu-data : DefaultSMenuProps.sub-menu-data;
  in-out property <string> active : "0";
  in property <length> more-height :icon-box-size;
  in property <length> more-width : icon-box-size * (menu-data.length - (top-view.height / icon-box-size));
  private property <brush> hover-icon-color : active-color.brighter(1.1);
  // params : 
  // 1. index
  // 2. menu item
  callback change(int,MenuData);
  pure function show-more-icon(h:length)->bool {
    return menu-data.length * icon-box-size > h;
  }
  VerticalLayout {
    spacing: 0;
    alignment: space-between;
    top-view:=VerticalLayout {
      height: parent.height - (sub-menu-data.length + 2) * icon-box-size;
      alignment: start;
      for item[index] in menu-data: STip { 
        height: menu-item.height;
        width: icon-box-size;
        text: item.name;
        theme: root.theme;
        position: Right;
        is-show : menu-item.has-hover;
        tip-width: root.tip-width;
        menu-item:=MenuItem{
          visible: (top-view.height / icon-box-size) > index;
          hover-icon-color: root.active-color;
          active-color: root.active-color;
          active: item.id == root.active;
          height: icon-box-size;
          icon: item.icon;
          icon-size: root.icon-size;
          theme: root.theme;
          clicked => {
            if root.active != item.id{
              root.active = item.id;
              root.change(index,item);
            }
          }
        }
      }
    }
    
    bottom-view:=VerticalLayout{
      height: (sub-menu-data.length + 2) * icon-box-size;
      Rectangle {
        height: icon-box-size;
        width: icon-box-size;
        more-icon:=SIcon{
          visible: root.show-more-icon(top-view.height);
          source: UseIcons.icons.More;
          theme: root.theme;
          height: icon-size;
          width: icon-size;
          clicked => {
            if(more-popup.is-show){
              more-popup.close();
            }else{
              more-popup.open();
            }
          }
        }
        more-popup:=SPopup {
          x: root.width + 12px;
          width: more-width;
          height: more-height;
          more-wrapper:= SCard {
            height: parent.height;
            width: parent.width;
            @children
          }
        }
      }
      empty-box:=Rectangle{
        height: icon-box-size; 
      }
      for item[index] in sub-menu-data: STip { 
        height: sub-menu-item.height;
        width: icon-box-size;
        text: item.name;
        theme: root.theme;
        position: Right;
        is-show : sub-menu-item.has-hover;
        tip-width: root.tip-width;
        sub-menu-item:=MenuItem{
          hover-icon-color: root.active-color;
          active-color: root.active-color;
          active: item.id == root.active;
          height: icon-box-size;
          icon: item.icon;
          icon-size: root.icon-size;
          theme: root.theme;
          clicked => {
            root.active = item.id;
            root.change(index,item);
          }
        }
      }
    } 
  }
}